<template>
  <div class="editor-example">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>富文本编辑器</span>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="24">
          <h4>基础用法</h4>
          <pro-editor
            v-model="content1"
            placeholder="请输入内容..."
            @change="handleChange"
          />
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="24">
          <h4>简洁模式</h4>
          <pro-editor
            v-model="content2"
            mode="simple"
            placeholder="请输入内容..."
            @change="handleChange"
          />
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="24">
          <h4>图片上传</h4>
          <pro-editor
            v-model="content3"
            :upload-img-server="uploadConfig.server"
            :upload-img-headers="uploadConfig.headers"
            :upload-img-max-size="uploadConfig.maxSize"
            :upload-img-max-number="uploadConfig.maxNumber"
            placeholder="请输入内容，支持图片上传..."
            @change="handleChange"
          />
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="24">
          <h4>禁用状态</h4>
          <pro-editor
            v-model="content4"
            :disabled="true"
            placeholder="禁用状态..."
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { IDomEditor } from "@wangeditor/editor";
import { ElMessage } from "element-plus";
import ProEditor from "@/components/ProEditor/index.vue";

// 编辑器内容
const content1 = ref("<p>这是一个基础的富文本编辑器示例</p>");
const content2 = ref("<p>这是一个简洁模式的富文本编辑器示例</p>");
const content3 = ref("<p>这是一个支持图片上传的富文本编辑器示例</p>");
const content4 = ref("<p>这是一个禁用状态的富文本编辑器示例</p>");

// 上传配置
const uploadConfig = {
  server: "/api/upload",
  headers: {
    Authorization: "Bearer token",
  },
  maxSize: 2 * 1024 * 1024, // 2MB
  maxNumber: 5,
};

// 内容变化回调
const handleChange = (editor: IDomEditor) => {
  console.log("editor content:", editor.getHtml());
};
</script>

<style lang="scss" scoped>
.editor-example {
  h4 {
    margin: 0 0 16px;
    color: #606266;
  }
}
</style>
